<template>
  <div class="main">
    <div class="middle">
      <goods :goods='goods' v-if="tabname==='goodList'" @showGoodDetail='showGoodDetail' :goodList='goodList'></goods>
      <shopCart :goods='goods' :order='order' v-if="tabname==='order'"></shopCart>
    </div>
    <div class="tabs">
      <div class="tab" @click='tabname="goodList"' :class="{'focus':tabname==='goodList'}">{{Text.botTabList}}</div>
      <div class="tab" @click='tabname="order"' :class="{'focus':tabname==='order'}">{{Text.order}}</div>
    </div>
    <transition name="fade" mode="out-in">
      <div class="goodDetail" v-if='detailVisible'>
        <div class="arrow" @click='detailVisible=false'>
          <i class="el-icon-arrow-left"></i>
        </div>
        <div class="pic">
          <img :src="choosenGood.picurl" alt="">
        </div>
        <div class="content">
          <div class="name">{{choosenGood.name}}<br/>{{translation.name? translation.name:''}}</div>
          <div class="price">{{choosenGood.price}}</div>
          <div class="description">
            <span class="title">{{Text.introTitle}}</span>
            <div class="desc-cont">{{choosenGood.description}}<br/>{{translation.name? translation.description:''}}</div>
          </div>
          <div class="detail">
            <span class="title">{{Text.detailTitle}}</span>
            <div class="detail-cont">{{choosenGood.detail}}<br/>{{translation.name? translation.detail:''}}</div>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>
<script>
import * as _ from 'lodash'
import goods from './goods/goods'
import shopCart from './shopCart/shopCart'
import api from '@/API/index'

export default {
  name: 'mainContent',
  props: {},
  data() {
    return {
      Text:{
        introTitle: this.$t('main.introTitle'),
        detailTitle: this.$t('main.detailTitle'),
        botTabList: this.$t('main.botTabList'),
        order: this.$t('main.order')
      },
      tabPosition: 'bottom',
      tabname: 'goodList',
      detailVisible: false,
      // 嵌套这kind的两层商品列表
      goodList: [],
      goods: {}, // {good-1:{name:''}} 数字为goodId
      choosenGood: {},
      translation: {},
      // 记录加入订单的商品的数量和内容，key为goodId，value包括good内容和数量
      order: {}
    }
  },
  created() {
    this.shopId = this.$route.params.shopId
    this.getGoodsByShopId(this.shopId)
  },
  mounted() {},
  methods: {
    getGoodsByShopId(shopId) {
      api.GET_GOODS_BY_SHOPID({ shopId }).then(({ data }) => {
        if (data.status == 200) {
          this.goodList = data.data.goods
          const orderinit = {}
          _.forEach(this.goodList, (item, index) => {
            _.forEach(item.goods, (good, index) => {
              this.goods[`good-${good.id}`] = good
              orderinit[`good-${good.id}`] = 0
            })
          })
          this.$store.commit('initOrder', orderinit)
        }
      })
    },
    showGoodDetail(good) {
      this.translation = good.translation
        ? JSON.parse(good.translation.zh_CN)
        : { name: '', description: '', detail: '' }
      this.choosenGood = good
      this.detailVisible = true
    }
  },
  components: {
    goods,
    shopCart
  }
}
</script>
<style lang="less" scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
.main {
  display: flex;
  flex-direction: column;
  flex: 1;
  .middle {
    display: flex;
    flex: 1;
  }
  .tabs {
    display: flex;
    justify-content: center;
    text-align: center;
    border-top: 1px solid #f3f5f7;
    .tab {
      flex: 1;
      height: 4rem;
      line-height: 4rem;
      &.focus {
        background-color: #f3f5f7;
      }
    }
  }
  .goodDetail {
    position: fixed;
    z-index: 1000;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: #fff;
    .arrow {
      position: absolute;
      top: 2rem;
      left: 2rem;
      width: 3rem;
      height: 3rem;
      display: flex;
      justify-content: center;
      align-items: center;
      background: rgba(0, 0, 0, 0.5);
      border-radius: 50%;
      i {
        transform: scale(1.8);
        color: #fff;
      }
    }
    .pic {
      padding: 0;
      height: 20rem;
      overflow: hidden;
      img {
        width: 100%;
      }
    }
    .content {
      padding: 1.8rem;
      > * {
        margin-bottom: 1rem;
      }
      .name {
        font-weight: bold;
        font-size: 1.8rem;
      }
      .price {
        color: #ee2d1c;
        font-size: 1.5rem;
      }
      .title {
        display: block;
        font-size: 1.6rem;
        color: #000;
        margin-bottom: 5px;
      }
      .description {
        color: #b8b5b5;
      }
      .detail {
        color: #7f7b7b;
      }
    }
  }
}
</style>
